<template>
    <div>
        <el-container class="common-layout">
            <el-header style="height: 35px;padding-top: 20px;">
                <span class="title">
                    <el-icon>
                        <House />
                    </el-icon>
                    订单管理/订单/<span style="color: #0098FF;">订单详情</span></span>
            </el-header>
            <el-main>
                <p style="padding-right: 1100px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;基础信息</p>
                <div style="padding-left:30px">
                    <div>
                       
                        <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    订单状态:{{tableData[0].ord_state}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    订单号:{{tableData[0].ord_number}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    客户名称:{{tableData[0].client_name}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    客户编码:{{tableData[0].ct_numbering}}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    始发地:{{tableData[0].ord_startaddress}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    目的地:{{tableData[0].ord_destination}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    运输类型:{{tableData[0].tran_type}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    货物类型:{{tableData[0].cg_type}}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    配送方式:{{tableData[0].dis_mode}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <!-- <div class="grid-content ep-bg-purple">
                                    合同:{{tableData[0].ct_numbering}}
                                </div> -->
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    下单时间:{{tableData[0].ord_time}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    订单来源:{{tableData[0].ord_source}}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    创建时间:{{tableData[0].create_time}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    创建人:{{tableData[0].create_by}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    最后更新时间:{{tableData[0].lastUpdate_time}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    最后更新人:{{tableData[0].lastUpdate_by}}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="13">
                                <div class="grid-content ep-bg-purple" style="background-color:#FFF4EB">
                                    <div style="width: 40px;height:40px;background-color: #FF9138;font-size: 25px;">  
                                        <span style="color: #fff;">发</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple" style="background-color:#EBFBF2">
                                    <div style="width: 40px;height:40px;background-color: #2ED477;font-size: 25px;">  
                                        <span style="color:#fff">收</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { onMounted,ref, reactive} from 'vue'
import axios from 'axios';
import { useRoute } from "vue-router";
export default {
    setup() {
        let router = useRoute();   //页面跳转
        let tableData=ref([]);   //订单表的详情
        let id=ref('');


        onMounted(()=>{
            id.value=router.query.id;
            Show();
        })
        function Show(){
            axios.get('http://localhost:5261/api/Order/GetOrder_Clients?Ord_number='+id.value).then((res)=>{
            tableData.value=res.data;
            console.log(tableData.value);
            tableData.value[0].create_time=new Date(tableData.value[0].create_time).toISOString().replace(/T/g,' ').replace(/.[\d]{3}Z/,' ');
            tableData.value[0].lastUpdate_time=new Date(tableData.value[0].lastUpdate_time).toISOString().replace(/T/g,' ').replace(/.[\d]{3}Z/,' ');
            tableData.value[0].ord_time=new Date(tableData.value[0].ord_time).toISOString().replace(/T/g,' ').replace(/.[\d]{3}Z/,' ');
            switch (tableData.value[0].ord_state) {
                case 1:
                tableData.value[0].ord_state='待接单';
                break;
                case 2:
                tableData.value[0].ord_state= '待提货';
                break;
                case 3:
                tableData.value[0].ord_state= '待发车';
                break;
                case 4:
                tableData.value[0].ord_state= '运输中';
                break;
                case 5:
                tableData.value[0].ord_state= '待签收';
                break;
                case 6:
                tableData.value[0].ord_state= '已完成';
                break;
                case 7:
                tableData.value[0].ord_state= '已取消';
                break;
                case 8:
                tableData.value[0].ord_state= '已拒绝';
                break;
            };
            switch (tableData.value[0].cg_type) {
                case 0:
                tableData.value[0].cg_type='日用品';
                break;
                case 1:
                tableData.value[0].cg_type= '食品';
                break;
                case 2:
                tableData.value[0].cg_type= '文件';
                break;
                case 3:
                tableData.value[0].cg_type= '家具';
                break;
            };
            switch (tableData.value[0].dis_mode) {
                case 0:
                tableData.value[0].dis_mode='送货上门';
                break;
                case 1:
                tableData.value[0].dis_mode= '驿站代取';
                break;
                case 2:
                tableData.value[0].dis_mode= '蜂巢寄存';
                break;
            };
        }).catch((err)=>{
            console.log("错误"+err);
        })
        }
       
        return {
            tableData,
            id
        }
    }
}
</script>

<style scoped>
.common-layout {
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
    background-color: #F5F9FF;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
}

.title {
    padding-right: 1010px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    /* background-color: aqua; */
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    max-width: 200px;
    /* 设置宽度，确保省略号显示正确 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出文本 */
    padding-right: 500px;
}
</style>